/*
参数说明：
alertShow-弹出框参数{
showmsg-服务器弹窗提示
msg-服务器提示内容
}
userData-用户基本信息{
tel-手机号
balance-账号余额
}
codeData-验证码基本信息参数{
sendCode-控制是否出现验证倒计时标签
time-倒计时时间
userCode-验证码input框绑定数据
}
formData-页面基本信息参数{
textType-是否显示输入金额大于账号余额文字提示的标签
scole-选择积分抵扣了多少钱（初始化为‘已抵扣￥0.00>’）
useNum-账号抵扣金额input框绑定数据
money-选择积分抵扣返回之后获得的抵扣多少钱
mianOrderId-订单Id
useScore-使用了多少积分做抵扣
inputTextMoney-微信需要支付的多少金额
alltotal-订单总价
orderbalance-话费多少钱最终余额
}
fnDataPrice-用于最终支付价格临时存储做删减用的参数(订单折扣后的总价-输入的余额val=最终微信需要支付的价格)
方法：
getUserInfodata-取得用户手机号-账号余额
buyGetData-取得订单数据
moenyFn-控制是否显示输入金额大于账号余额
setTime-验证码倒计时方法
shopCleanfn-微信支付-同时先调用发送验证码到手机的接口
codeTelFn-发送验证码信息
*/
<template>
  <div>
    <alert v-model="alertShow.showmsg" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{alertShow.msg}}</alert>
    <Yq-header :needBack="true">
      <p slot="content">支付订单</p>
    </Yq-header>
    <div style="width: 100%;height: 38px;"><span>&nbsp;&nbsp;</span></div>
    <group gutter="10">
      <cell :title="'订单总计'">
        <div slot="value">
          <h4 style="color: #fa1118">
            <span v-if="vipInfo.payType===1">￥{{vipInfo.price}}</span>
            <span v-if="vipInfo.payType===2">{{vipInfo.point}}积分</span>
          </h4>
        </div>
      </cell>
      <cell v-if="vipInfo.payType===2">当前剩余积分:{{userPoint}}</cell>
    </group>
    <div v-if="vipInfo.payType===1">
      <group :title="'余额支付'">
        <div style="padding-left: 10px;padding-top: 5px;padding-bottom: 5px">
          <p>当前账户余额：￥{{userData.balance}}</p>
        </div>
        <x-input title="" type="text" placeholder="请输入用于抵扣的金额" keyboard="number" v-model="formData.useNum"  @on-change="moenyFn"></x-input>
      </group>
      <div v-if="formData.textType===true" style="padding-left: 10px;color: #fa0000;">
        <p>输入的金额大于订单金额!</p>
      </div>
      <group gutter="10" :title="''">
        <cell :title="'微信支付'">
          <div slot="value">
            <h4 style="color: #fa1118">￥{{formData.inputTextMoney}}</h4>
          </div>
        </cell>
      </group>
    </div>
    <div style="padding-left: 10px;">
      <p>手机号码：{{userData.tel}}</p>
    </div>
    <group gutter="0">
      <x-input title="验证码" class="weui-vcode" placeholder="请输入验证码" v-model="codeData.userCode">
        <x-button v-if="codeData.sendCode===true" slot="right" style="background: #afafaf;position: absolute;right: 6px;top: 10px;padding: 0 3px" type="primary" mini>{{codeData.time}}S后重新发送</x-button>
      </x-input>
    </group>
    <div style="padding: 15px">
      <x-button  @click.native="shopCleanfn" type="primary" style="background: #3d82e5;font-size: 15px;width: 200px;">确认支付</x-button>
    </div>
  </div>
</template>
<script>
  import { Group, Cell, Flexbox, FlexboxItem, XInput, Checklist, XButton, Alert } from 'vux'
  import * as urls from '../../../../api/urls'
  import YqHeader from '../../../../components/YqHeader.vue'
  //  import * as types from '../../../../store/types'

  export default {
    components: {
      Group,
      Cell,
      FlexboxItem,
      Flexbox,
      XInput,
      Checklist,
      XButton,
      Alert,
      YqHeader
    },
    mounted: function () {
      this.vipInfo = this.$store.state.userOrder.vip
      this.getUserInfodata()
      this.getWalletInfo()
      this.weixinfn25()
    },
    data () {
      return {
        vipInfo: {},
        userPoint: '',
        alertShow: {
          showmsg: false,
          msg: ''
        },
        userData: {
          tel: '',
          balance: ''
        },
        codeData: {
          sendCode: false,
          time: 59,
          userCode: ''
        },
        formData: {
          textType: false,
          scole: '已抵扣￥0.00〉',
          useNum: '',
          money: '',
          useScore: '',
          mianOrderId: '',
          inputTextMoney: '',
          alltotal: '',
          orderbalance: ''
        },
        fnDataPrice: 50
      }
    },
    methods: {
      getUserInfodata () {
        let userId = this.$store.state.userInfo.id
        let that = this
        this.http(urls.userIndex, {userId: userId}, function (res) {
          if (res.status === 100) {
            that.userData.tel = res.data.user.tel
            that.userData.balance = res.data.user.balance
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      moenyFn (val) {
        let that = this
        let textVal
        if (val === '' || val === null || val === undefined) {
          textVal = 0
        } else {
          textVal = parseInt(val)
        }
        let alltotal = that.vipInfo.price
        this.formData.orderbalance = textVal
        if (val === '') {
          that.formData.inputTextMoney = parseInt(alltotal) - that.formData.money
        } else {
          if (textVal > this.userData.balance) {
            that.formData.textType = true
          } else {
            if (that.fnDataPrice < textVal) {
              that.formData.textType = true
            } else {
              that.formData.inputTextMoney = parseInt(alltotal) - textVal
              that.formData.textType = false
            }
          }
        }
      },
      shopCleanfn () {
        let userId = this.$store.state.userInfo.id
        let that = this
        if (that.codeData.userCode !== '') {
          // 余额付款
          that.http(urls.buyVip, {userId: userId, itemId: that.vipInfo.itemId, code: that.codeData.userCode}, function (res) {
            if (res.status === 100) {
              that.alertShow.showmsg = true
              that.alertShow.msg = '续费成功'
            } else {
              that.alertShow.showmsg = true
              that.alertShow.msg = res.errMsg
            }
          }, function (res) {
            that.alertShow.showmsg = true
            that.alertShow.msg = '服务器错误，请稍后重试'
          })
        } else {
          if (that.codeData.time === 59) {
            console.log(that.codeData.time)
            that.codeTelFn()
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = '请在' + that.codeData.time + '点击发送新的验证码,如果已收到请填写验证码'
          }
        }
      },
      codeTelFn () {
        let userId = this.$store.state.userInfo.id
        let that = this
        that.http(urls.payMessage, {userId: userId}, function (res) {
          if (res.status === 100) {
            that.alertShow.showmsg = true
            that.alertShow.msg = '验证码已发出，请注意手机查收'
            that.codeData.sendCode = true
            that.setTime()
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      setTime () {
        let interval
        let that = this
        let setTimeFn = function () {
          that.codeData.time--
          if (that.codeData.time < 0) {
            clearInterval(interval)
            that.codeData.sendCode = false
            that.codeData.time = 59
          }
        }
        interval = setInterval(function () {
          setTimeFn()
        }, 1000)
      },
      onShow () {
        // 弹窗出现时触发
        console.log('on show')
      },
      onHide () {
//         弹窗关闭时触发
        if (this.alertShow.msg === '续费成功') {
          this.$router.go(-3)
        }
      },
      getWalletInfo () {
        let userId = this.$store.state.userInfo.id
        let that = this
        that.http(urls.userWallet, {userId: userId}, function (res) {
          if (res.status === 100) {
            that.userPoint = res.data.point
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      weixinfn25 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    }
  }
</script>
<style scoped="scoped">
</style>
